<template>
	<view class="wrap">
		<u-navbar title="股票自选" back-icon-color="#292929" back-icon-size="36" title-color="#222" title-size="34">
			<view slot="right" class="slot-right">
				<button type="default" class="btn">
					<u-icon name="search" size="36" color="#292929"></u-icon>
				</button>
				<button type="default" class="btn">
					<u-icon name="list-dot" size="40" color="#292929"></u-icon>
				</button>
			</view>
		</u-navbar>
		<view class="content">
			<view class="stock">
				<view class="stock-hd">
					<view class="stock-left">
						<view class="label">上证指数</view>
						<view class="number">3643.52</view>
						<view class="chg">-0.52%</view>
						<u-icon name="arrow-down" size="26" color="#979797"></u-icon>
					</view>
					<view class="stock-right">
						<text>基金自选</text>
						<u-icon name="arrow-right" size="24" color="#1979ec"></u-icon>
					</view>
				</view>
				<view class="stock-bd">
					<view class="stock-nav">
						<view class="stock-nav__item">
							<image src="../../static/uview/images/stock1.png" mode="" class="stock-nav__icon"></image>
							<view class="stock-nav__title">必读</view>
							<u-badge :is-dot="true" type="error" class="badge" :offset="offset"></u-badge>
						</view>
						<view class="stock-nav__item">
							<image src="../../static/uview/images/stock2.png" mode="" class="stock-nav__icon"></image>
							<view class="stock-nav__title">盯盘</view>
						</view>
						<view class="stock-nav__item">
							<image src="../../static/uview/images/stock3.png" mode="" class="stock-nav__icon"></image>
							<view class="stock-nav__title">资金</view>
						</view>
						<view class="stock-nav__item">
							<image src="../../static/uview/images/stock4.png" mode="" class="stock-nav__icon"></image>
							<view class="stock-nav__title">模拟</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tabs">
				<view class="tab-head">
					<view style="width: 390rpx;">
						<u-tabs :list="tabs" :is-scroll="false" :current="active" @change="change" :bar-style="barStyle"
							:bar-width="72"></u-tabs>
					</view>
					<view class="arrow-right">
						<u-icon name="arrow-down" size="28" color="#979797"></u-icon>
					</view>
				</view>
				<view class="tab-content">
					<u-table align="left" border-color="transparent" padding="0">
						<u-tr class="u-tr">
							<u-th class="u-th" width="55%">
								<view class="flex-center">
									<text>产品名称</text>
									<u-icon name="info-circle" size="30" color="#818181"></u-icon>
								</view>
							</u-th>
							<u-th class="u-th" width="23%">
								<view class="flex-center">
									<text>最新价</text>
									<view class="u-th-slot">
										<view class="slot-up"></view>
										<view class="slot-down"></view>
									</view>
								</view>
							</u-th>
							<u-th class="u-th" width="22%">
								<view class="flex-center th-last">
									<text>涨跌幅</text>
									<view class="u-th-slot">
										<view class="slot-up"></view>
										<view class="slot-down"></view>
									</view>
								</view>
							</u-th>
						</u-tr>
						<u-tr class="u-tr">
							<u-td class="u-td"  width="55%">
								<view class="product">
									<text class="name">招商蛇口A</text>
									<view class="icon icon-bg1">
										<text class="iconfont icon-bell"></text>
									</view>
								</view>
								<view class="sz">001979.SZ</view>
							</u-td>
							<u-td class="u-td"  width="23%">
								<view class="price text-danger">10.54</view>
							</u-td>
							<u-td class="u-td"  width="22%">
								<view class="btn btn-danger">+1.74%</view>
								<view class="order">超大买单</view>
							</u-td>
						</u-tr>
						<u-tr class="u-tr">
							<u-td class="u-td"  width="55%">
								<view class="product">
									<text class="name">格力电器</text>
									<view class="icon icon-bg1">
										<text class="iconfont icon-bell"></text>
									</view>
									<view class="icon icon-bg2">
										<text class="iconfont icon-jingbao"></text>
									</view>
								</view>
								<view class="sz">000651.SZ</view>
							</u-td>
							<u-td class="u-td"  width="23%">
								<view class="price text-success">39.33</view>
							</u-td>
							<u-td class="u-td"  width="22%">
								<view class="btn btn-success">-2.19%</view>
								<view class="order">超大买单</view>
							</u-td>
						</u-tr>
					</u-table>
				</view>
			    <view class="tab-footer">
					<view class="flex_bd">
						<button type="default" class="btn"><u-icon name="plus" size="26" color="#2a2a2a"></u-icon>批量导入</button>
					</view>
					<view class="flex_bd">
						<button type="default" class="btn"><u-icon name="plus" size="26" color="#2a2a2a"></u-icon>添加股票</button>
					</view>
				</view>
			</view>
		    <view class="explain">行情由第三方提供，详见使用声明</view>
		</view>
		<view class="notice-bar">
			<button type="default" class="btn close-btn">
				<u-icon name="close" color="#fff" size="24"></u-icon>
			</button>
			<view class="flex_bd">
				<view class="title">别错过!区域创新型医药龙头今日申购来啦</view>
			</view>
			<button type="default" class="btn go-new">去打新</button>
		</view>
		<u-tabbar v-model="current" inactive-color="#868686" active-color="#e95d37" :list="list"></u-tabbar>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [{
					iconPath: "../../static/uview/images/j1.png",
					selectedIconPath: "../../static/uview/images/g1_on.png",
					text: '首页',
					pagePath: '/pages/stock/index',
				}, {
					iconPath: "../../static/uview/images/j2.png",
					selectedIconPath: "../../static/uview/images/g2_on.png",
					text: '自选',
					pagePath: '/pages/stock/optional',
				}, {
					iconPath: "../../static/uview/images/g3.png",
					selectedIconPath: "../../static/uview/images/g3_on.png",
					text: '市场',
					pagePath: '/pages/stock/market',
				}, ],
				current: 0,
				offset: [0, 0],
				tabs: [{
					name: '沪深'
				}, {
					name: '港股'
				}, {
					name: '美股',
				}, {
					name: '全部',
				}],
				active: 0,
				barStyle: {
					bottom: '-6rpx'
				}
			}
		},
		computed: {},
		onShow() {},
		methods: {
			change(index) {
				this.active = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f6f6f6;
	}

	.slot-right {
		padding-right: 30rpx;

		.btn {
			display: inline-block;
			background-color: transparent;
			height: 64rpx;
			padding: 0;
			line-height: 1.8;
			margin-left: 30rpx;
			vertical-align: middle;
		}
	}

	.content {
		padding: 20rpx 30rpx;
	}

	.stock {
		background-color: #fff;
		padding: 0 20rpx;
		border-radius: 24rpx;
		margin-bottom: 16rpx;

		.stock-hd {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 0;
			border-bottom: 1rpx solid #ededed;

			.stock-right {
				color: #1979ec;
				font-size: 24rpx;

				text {
					margin-right: 10rpx;
				}
			}

			.stock-left {
				display: flex;
				align-items: center;

				.label {
					font-size: 26rpx;
					color: #2a2a2a;
					margin-right: 10rpx;
				}

				.number {
					font-size: 22rpx;
					margin-right: 10rpx;
					color: #2c735b;
				}

				.chg {
					background-color: #e7f4ef;
					font-size: 18rpx;
					color: #2c735b;
					line-height: 26rpx;
					border-radius: 2rpx;
					padding: 0 4rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.stock-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16rpx 0 26rpx;

		.stock-nav__item {
			padding: 8rpx;
			padding-right: 20rpx;
			display: flex;
			align-items: center;
			position: relative;

			.stock-nav__icon {
				display: block;
				width: 34rpx;
				height: 34rpx;
				margin-right: 6rpx;
			}

			.stock-nav__title {
				font-size: 26rpx;
				color: #888888;
			}
		}
	}

	.tabs {
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 30rpx;

		.tab-head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 30rpx;
			padding-left: 20rpx;
		}
		
		.tab-content{
			padding: 10rpx 30rpx;
		}
		
		.tab-footer{
			display: flex;
			align-items: center;
			border-top: 2rpx solid #f1f1f1;
			
			.flex_bd{
				position: relative;
			}
			
			.flex_bd::after{
				position: absolute;
				content: '';
				right: 0;
				top: 50%;
				height: 40rpx;
				background-color: #d6d6d6;
				width: 2rpx;
				margin-top: -20rpx;
			}
			
			.flex_bd:last-child::after{
				display: none;
			}
			
			.btn{
				font-size: 28rpx;
				color: #1a1a1a;
				padding: 10rpx;
				background-color: transparent;
			}
		}
	}

	.u-th {
		font-size: 24rpx;
		color: #999999;
		font-weight: normal;
		background-color: transparent;
		line-height: 40rpx;

		text {
			letter-spacing: 2rpx;
			margin-right: 4rpx;
		}
	}

	.slot-up {
		position: relative;
		width: 24rpx;
		height: 12rpx;
	}

	.slot-up::after {
		position: absolute;
		left: 50%;
		margin-left: -10rpx;
		bottom: 4rpx;
		content: '';
		width: 0;
		height: 0;
		border: 8rpx solid transparent;
		border-bottom: 8rpx solid #cdcdcd;
	}

	.slot-down {
		position: relative;
		width: 24rpx;
		height: 12rpx;
	}

	.slot-down::after {
		position: absolute;
		left: 50%;
		margin-left: -10rpx;
		top: 4rpx;
		content: '';
		width: 0;
		height: 0;
		border: 8rpx solid transparent;
		border-top: 8rpx solid #cdcdcd;
	}

	.u-td {
		height: 90rpx;
		line-height: 1.2;
		
		.product {
			display: flex;
			align-items: center;

			.name {
				font-size: 28rpx;
				color: #050505;
				margin-right: 10rpx;
			}

			.icon {
				width: 32rpx;
				height: 32rpx;
				border-radius: 2rpx;
				line-height: 32rpx;
				margin-right: 8rpx;

				.iconfont {
					font-size: 24rpx;
					display: block;
				}
			}
			
			.icon-bg1{
				background-color: #fcede3;
				text-align: center;
				
				.iconfont{
					color: #f5914c;
				}
			}
			
			.icon-bg2{
				background-color: #f4eefe;
				text-align: center;
				
				.iconfont{
					color: #4a6eb0;
				}
			}
		}

		.sz {
			font-size: 16rpx;
			color: #404040;
		}
		
		.price{
			font-size: 24rpx;
		}
		
		.text-danger{
			color: #d01d23;
		}
		
		.text-success{
			color: #3a9876;
		}
		
		.order{
			font-size: 18rpx;
			color: #8b8b8b;
			text-align: right;
		}
		
		.btn-danger{
			background-color: #d01d23;
		}
		
		.btn-success{
			background-color: #3a9876;
		}
		
		.btn{
			font-size: 24rpx;
			padding: 8rpx;
			color: #fff;
			width: 146rpx;
			text-align: center;
			border-radius: 6rpx;
		}
	}
	
	.th-last{
		justify-content: flex-end;
	}
	
	.explain{
		font-size: 24rpx;
		color: #a8a8a8;
		text-align: center;
	}
	
	.notice-bar{
		display: flex;
		align-items: center;
		background-color: #4196e7;
		border-radius: 4rpx;
		padding: 22rpx 30rpx 20rpx 20rpx;
		position: fixed;
		left: 10rpx;
		z-index: 111;
		box-shadow: 0 4px 8px rgba(65,150,231,0.16);
		bottom: 130rpx;
		right: 10rpx;
		
		.close-btn{
			width: 40rpx;
			height: 40rpx;
			padding: 8rpx;
			background-color: transparent;
			margin-right: 20rpx;
			
			.u-icon{
				display: block;
			}
		}
		
		.title{
			font-size: 26rpx;
			color: #fff;
			letter-spacing: 2rpx;
			line-height: 32rpx;
		}
		
		.go-new{
			font-size: 26rpx;
			color: #fff;
			height: 50rpx;
			padding: 0;
			margin-left: 32rpx;
			line-height: 50rpx;
			width: 122rpx;
			border-radius: 4rpx;
			background-color: rgba(255,255,255,0.3);
		}
	}
</style>
